<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.superlists.model.SuperList" %>
<%@ page import="com.google.superlists.model.SuperListItem" %>
<%@ page import="com.google.superlists.model.SuperTaskList" %>
<%@ page import="com.google.superlists.model.SuperTaskLists" %>
<%@ page import="java.util.Map" %>
<%
  SuperList list = (SuperList) request.getAttribute("list");
  SuperTaskLists taskLists = (SuperTaskLists) request.getAttribute("tasklists");
  Map<?, ?> metrics = (Map<?, ?>) request.getAttribute("metrics");
%>
<html>
<head>
    <title><%= list.name %></title>
    <link rel="stylesheet" href="/static/superlists.css"></link>
    <script src="/static/superlists.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var superlist = superlist || {};
    superlist.id = "<%= list.id %>";
    superlist.name = "<%= list.name %>";
    superlist.items = [];
    superlist.tasklists = [];
    superlist.eventIds = [];
<%
  if (list.content.tasklistId != null) {
    out.print("    superlist.tasklistId = \"");
    out.print(list.content.tasklistId);
    out.println("\";");
  }
  if (list.content.eventId != null) {
    out.print("    superlist.eventId = \"");
    out.print(list.content.eventId);
    out.println("\";");
    out.print("    superlist.eventIds.push(\"");
    out.print(list.content.eventId);
    out.println("\");");
  }
  if (list.content.dueDate != null) {
    out.print("    superlist.dueDate = \"");
    out.print(list.content.dueDate);
    out.println("\";");
  }
  for (SuperListItem item : list.content.items) {
    out.print("    superlist.items.push(");
    out.print(item.toJson());
    out.println(");");
    if (item.eventId != null) {
      out.print("    superlist.eventIds.push(\"");
      out.print(item.eventId);
      out.println("\");");
    }
  }
  for (SuperTaskList tasklist : taskLists.lists) {
    out.print("    superlist.tasklists.push(");
    out.print(tasklist.toJson());
    out.println(");");
  }
%></script>
</head>
<body onload="superlist.load()">

<table>
<tr><!-- Main Row -->

<!-- Left Nav Column -->
<td valign="top" width="180px">
<br/>
  <div id="action-pane">
    <button type="submit" class="btn" id="add"
            onclick="superlist.addItem()">+</button>
    <button type="submit" class="btn" id="save"
            onclick="superlist.save()">Save</button>
  </div><br/>
Task Lists:<br/>
  <div id="tasklist-pane">
    <table id="tasklist-table"></table>
  </div>
&nbsp;<button type="submit" class="btn" id="create-task-list"
          onclick="superlist.createTaskList()">Create New</button>
</td>

<td valign="top"><!-- Main Content Column -->
<table id="content-table"><!-- Main Content Table -->
<thead valign="top"><tr><!-- Header Row -->

<td valign="middle" width="110px" height="22px"><!-- Overall Due Date -->
  <span id="name-date-editor" onclick="superlist.editNameDate()">
    <input type="date" id="name-date-input" size="10"<%
  if (list.content.dueDate != null) {
        %> value="<%= list.content.dueDate %>"
<% } %>    onblur="superlist.saveNameDate()"
           onkeydown="superlist.nameDateEvent(event)"/>
  </span>
  <span id="name-date-holder" onclick="superlist.editNameDate()">
  <%
  if (list.content.dueDate != null) {
    %><%= list.content.dueDate %><%
  } else {
    %><button type="submit" class="btn" id="name-date-create">Set Due Date</button><%
  } %>
  </span>
</td>

<td valign="top" width="520px" height="22px"><!-- List Title -->
  <span id="name-holder" onclick="superlist.editName()"><%= list.name %></span>
  <span id="name-editor">
    <input type="text" id="name-input" value="<%= list.name %>"
           onblur="superlist.saveName()"
           onkeydown="superlist.nameEvent(event)"/>
  </span>
</td>

</tr></thead><!-- End Header -->

<!-- Body of table (items). -->
<tbody valign="top" align="left" id="item-table"></tbody>

</table><!-- End Main Content Table -->
</td><!-- End Main Content Column -->

<!-- Debug Column -->
<td valign="top" width="200px">Metrics:<br/>
  <div id="metrics-pane"><%
  if (metrics != null) {
    for (Map.Entry<?, ?> entry : metrics.entrySet()) {
%><%= entry.getKey() %>: <%= entry.getValue() %><br/>
<%  } 
  }
  %></div>
</td>
</tr>

<!-- Footer Row -->
<tr>
<!-- Options -->
<td colspan="3">
  <input type="checkbox" id="options-response" value="partialResponse"
         onclick="superlist.setOptions()"/>Partial Responses<br/>
  <input type="checkbox" id="options-update" value="partialUpdate"
         onclick="superlist.setOptions()"/>Partial Update<br/>
  <input type="checkbox" id="options-batch" value="batch"
         onclick="superlist.setOptions()"/>Batch<br/>
</td>
</tr>
</table>
</body>
</html>
